<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
    <script>
        var url = "127.0.0.1:7001";
        // WebSocket连接
        var pageWs;
        function connect() {
            // 创建一个新的WebSocket连接
            pageWs = new WebSocket("ws://" + url + "/websocket/page");

            // 连接打开时触发
            pageWs.onopen = function() {
                console.log("连接已打开...");
            };

            // 接收到服务器消息时触发
            pageWs.onmessage = function(evt) {
                var received_msg = evt.data;
                console.log("从服务器收到消息: " + received_msg);
                // 可以在这里更新页面元素显示消息
                // document.getElementById("messages").innerHTML += "<p>服务器: " + received_msg + "</p>";
            };

            // 连接关闭时触发
            pageWs.onclose = function() {
                console.log("连接已关闭...");
            };

            // 发生错误时触发
            pageWs.onerror = function(error) {
                console.error("WebSocket Error: " + error);
            };
        }

        function sendRoundStart() {
            pageWs.send(JSON.stringify({
                "type": "F_RoundStart",
                "data": {}
            }));
        }

        function sendReStart() {
            pageWs.send(JSON.stringify({
                "type": "F_GameRestart",
                "data": {}
            }));
        }

        // 页面加载完成后尝试连接
        window.onload = function() {
            connect();
        };

        let infoList = [];
        function createPlayer(count) {
            for (let i = 0; i < count; i++) {
                // 创建一个新的WebSocket连接
                const ws = new WebSocket("ws://" + url + "/websocket/player");
                // 连接打开时触发
                ws.onopen = function() {
                    console.log("连接已打开...");
                    // 可以在这里发送一些初始消息
                    const playerInfo = {
                        "type": "C_PlayerInfo",
                        "data": {
                            "name":"玩家"+i,
                            "photo":"xxxxxxxxxxxxxxxxxxxxxxxxxxx"
                        }
                    }
                    ws.send(JSON.stringify(playerInfo));
                };

                // 接收到服务器消息时触发
                ws.onmessage = function(evt) {
                    var msg = JSON.parse(evt.data);
                    if(msg.type === 'S_PlayerDoing'){
                        ws.send(JSON.stringify({
                            "type": "C_PlayerOperate",
                            "data": {
                                "playerIndex": msg.data.playerIndex,
                                "score": infoList[i].currentScore
                            }
                        }))
                    }else if(msg.type === 'S_GameRoundInfo'){
                        infoList[i] = msg.data;
                    }
                };

                // 连接关闭时触发
                ws.onclose = function() {
                    console.log("连接已关闭...");
                };

                // 发生错误时触发
                ws.onerror = function(error) {
                    console.error("WebSocket Error: " + error);
                };
            }
        }

        function create(){
            const count = document.getElementById("playerCount").value;
            createPlayer(count);
        }
    </script>
</head>
<body>
<div>
    <h1>1、创建玩家客户端，请输入玩家数量：</h1>
    <input type="text" id="playerCount" placeholder="请输入..." value="5">
    <button onclick="create()">创建</button>
</div>
<div>
    <h1>2、前端页面客户端</h1>
    <button onclick="sendRoundStart()">游戏/回合开始</button>
    <button onclick="sendReStart()">重新开始</button>
</div>
</body>
</html>